<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      :title="t('routes.demo.partManagerSettings.partType')"
      @register="register"
      @ok="handleSubmit"
      @cancel="handleCloseModal"
      :destroyOnClose="true"
      :minHeight="150"
      :width="500"
    >
      <Select
        v-model:value="partType"
        style="width: 100%"
        :placeholder="t('routes.demo.partManagerSettings.partTypePlaceholder')"
        allowClear
      >
        <SelectOption v-for="(item, index) in FolderList" :key="index" :value="item.value">{{
          item.label
        }}</SelectOption>
      </Select>
    </BasicModal>
    <!-- 零件详情 -->
    <partDetailModal @register="registerPartDetail" />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
  import { Select, SelectOption } from 'ant-design-vue';
  import { useMessage } from '/@/hooks/web/useMessage';

  import { getPartType } from '/@/api/demo/partManager';

  import partDetailModal from './partDetailModal.vue';

  const { t } = useI18n();
  const { createMessage } = useMessage();
  const FolderId = ref<any>('');
  const FolderList = ref<any>([]);
  const partType = ref<any>(undefined);

  // 定义弹窗是否可见
  const [register, { setModalProps, closeModal }] = useModalInner((data) => {
    setModalProps({ confirmLoading: false });
    FolderId.value = data.FolderId;
    getPartType(data.FolderId).then((res) => {
      FolderList.value = res.listPartType;
    });
  });

  // 提交
  async function handleSubmit() {
    if (!FolderId.value) {
      createMessage.warning(t('routes.demo.partManagerSettings.partTypePlaceholder'));
    } else {
      openPartDetail(true, { isUpdate: false, FolderId: FolderId.value, partType: partType.value });
      handleCloseModal();
    }
  }

  // 关闭弹窗
  const handleCloseModal = () => {
    setModalProps({ confirmLoading: false });
    FolderId.value = '';
    partType.value = undefined;
    FolderList.value = [];
    closeModal();
  };

  // 零件详情
  const [registerPartDetail, { openModal: openPartDetail }] = useModal();
</script>

<style lang="less" scoped></style>
